<script lang="ts" setup>
import { toRefs, shallowRef, watch } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
const mapConfig = {
  key: "ffdc25d48476be43db69ee51b49b80e9",
  version: "2.0",
  plugins: ["AMap.DistrictSearch"]
};
const props = defineProps({
  msgBody: {
    type: [Object],
    default: () => {
      return {};
    }
  }
});
const msgBody: any = toRefs(props).msgBody;
console.log(msgBody.value);
const initMap = () => {
  const map: any = shallowRef(null);
  const amap = shallowRef(null);

  const mapInitInfo = {
    viewMode: "2D",
    zoom: 12,
    center: [msgBody.value.lng, msgBody.value.lat]
  };
  AMapLoader.load(mapConfig).then(AMap => {
    map.value = new AMap.Map(msgBody.value.id, mapInitInfo);
    amap.value = AMap;
    map.value.add(
      new AMap.Marker({
        position: new AMap.LngLat(msgBody.value.lng, msgBody.value.lat)
      })
    );
  });
};
initMap();
</script>

<template>
  <div class="map">
    <div class="address">{{ msgBody.addr }}</div>
    <div :id="msgBody.id" class="map-box"></div>
  </div>
</template>

<style lang="scss" scoped>
.map {
  overflow: hidden;
  background-color: #fff;
}
.map-box {
  width: 300px;
  height: 200px;
}
.address {
  max-width: 280px;
  padding: 10px;
  background: #fff;
}
</style>
